import { IFormProps, size, formItemLayout, getUploadResult, getImages, getFileList, areaOptions, getAreaList } from '../../utils/common';
import React from 'react';
import { Modal, Form, Input, Select, Upload, InputNumber, Cascader,Checkbox } from 'antd';
import * as api from '../../api/api';
import { FormComponentProps } from 'antd/lib/form';
export interface StoreRegisterEditProps extends FormComponentProps {
    visible: boolean,
    storeRegister?: api.SingleUserMallStoresVOStoreRegisterVO,
    onSave: (any) => void,
    onCancel: () => void,
}
class StoreRegisterEdit extends React.PureComponent<StoreRegisterEditProps, any>{
    constructor(props) {
        super(props);
    }

    ok = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, form) => {
            if (!err) {
                this.props.onSave(form);
            }
        });
    }

    cancel = () => {
        this.props.onCancel();
    }

    render(): JSX.Element {
        const { getFieldDecorator } = this.props.form;
        const { storeRegister } = this.props;
        return (
          <Modal
            title="商城申请配置"
            visible={this.props.visible}
            onOk={this.ok}
            onCancel={this.cancel}
            maskClosable={true}
          >
            <Form>
              <Form.Item {...formItemLayout}>
                {getFieldDecorator("id", {
                  initialValue: storeRegister && storeRegister.id
                })(<Input size={size} type="hidden" />)}
              </Form.Item>
              <Form.Item label="名称" {...formItemLayout}>
                {getFieldDecorator("name", {
                  rules: [
                    {
                      required: true,
                      message: "请填写名称"
                    }
                  ],
                  initialValue: storeRegister && storeRegister.name
                })(<Input size={size} placeholder="请输入名称" />)}
              </Form.Item>
              <Form.Item label="入驻金额" {...formItemLayout}>
                {getFieldDecorator("registerAmount", {
                  rules: [
                    {
                      required: true,
                      message: "请填写金额"
                    }
                  ],
                  initialValue:
                    storeRegister && storeRegister.registerAmount
                })(
                  <InputNumber
                    size={size}
                    placeholder="请输入入驻金额"
                  />
                )}
              </Form.Item>
              <Form.Item label="有效年份" {...formItemLayout}>
                {getFieldDecorator("endYear", {
                  initialValue: storeRegister && storeRegister.endYear
                })(
                  <InputNumber
                    size={size}
                    max={99}
                    placeholder="有效年份"
                  />
                )}
              </Form.Item>
              <Form.Item label="有效月份" {...formItemLayout}>
                {getFieldDecorator("endMonth", {
                  initialValue: storeRegister && storeRegister.endMonth
                })(
                  <InputNumber
                    size={size}
                    max={11}
                    placeholder="有效月份"
                  />
                )}
              </Form.Item>
              <Form.Item label="有效天数" {...formItemLayout}>
                {getFieldDecorator("endDay", {
                  initialValue: storeRegister && storeRegister.endDay
                })(
                  <InputNumber
                    size={size}
                    max={30}
                    placeholder="有效天数"
                  />
                )}
              </Form.Item>
              <Form.Item label="是否启用" {...formItemLayout}>
                {getFieldDecorator("isEnable", {
                  valuePropName: "checked",
                  initialValue: storeRegister && storeRegister.isEnable
                })(<Checkbox />)}
              </Form.Item>
            </Form>
          </Modal>
        );
    }
}

export default Form.create()(StoreRegisterEdit);